<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>百货超市</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/supermarket.css" />
		<link rel="stylesheet" href="css/all.css" />
	</head>
	<style>
		.supermarket{
			width: 100%;
		    position: absolute;
		    top: 1.5rem;
		    bottom: 0rem;
		    z-index: -1;
		    overflow-y: scroll;
		}
		
	</style>
	<body>
		<div>
			<div class="head">
				<span href="javascript:;" onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
				<h1 class="titles">百货超市</h1>
			</div>
			<div class="supermarket">
				<div onclick="location.href='./commodity-details.html'">
					<div class="commodity">
						<div class="commoditys">
							<img src="img/300377.png" alt="">
						</div>
						<div class="commo">
							<p class="commo-one">加拿大枫糖，枫叶国的餐桌美味。</p>
							<p class="commo-two">健脾补脾，益气活血，美容养颜。促进肠胃消化等功效 </p>
							<span>(</span><i class="money">1元</i><span>/100次)</span>
						</div>
					</div>
				</div>
				 
			 
				 
				 
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/all.js"></script>
		<script type="text/javascript">
			
//			
			console.log(GetQueryString(decodeURI("picture")));
			var Request=new UrlSearch(); //实例化
		 	$(".titles").text(decodeURI(Request.picture));
		 
			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.supermarket', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};

			var html = "";

			function ajaxLoad(_loadIndex){
				console.log(GetQueryString("id"));

				var data = {
					typeId: GetQueryString("id"),
					browseType: "1",
					page: _loadIndex,
					Rows: 6
				};

				var success = (data) => {
					
					for(let i=0;i<data.length;i++){
						html+=`
							<div onclick="location.href='./commodity-details.html?browseTaskId=${data[i].browseTask.browseTaskId}'">
								<div class="commodity">
									<div class="commoditys">
										<img src="${data[i].browseTask.picture}" alt="">
									</div>
									<div class="commo">
										<p class="commo-one">${data[i].browseTask.title}</p>
										<p class="commo-two">${data[i].browseTask.briefIntroduction}</p>
										<span>(</span><i class="money">${data[i].browseTask.oneMoney}元</i><span>/${data[i].browseTask.envelopesNum}次)</span>
									</div>
								</div>
							</div>
						
						`
					}
					
					$(".supermarket").html(html);
					 if(data ==""){
					 	 
					 }else{
					 	_loadState = 0;  //状态改为0
					 }
					
				}

				Hajax("post", "/browseTask/findPageBrowseTask2", data, success);
			};
			
			ajaxLoad(_loadIndex);
		</script>
	</body>

</html>